<template>
  <div>
    <van-nav-bar title="确认订单" left-text="" left-arrow @click-left="$router.back()" />
    <!-- 自提和外送-->
    <van-cell class="myshlf">
      <template #title>
        <div class="shlf">
          <button :class="{ 'active': flag == 1 }" @click="flag1">自提</button>
          <button :class="{ 'active': flag == 2 }" @click="flag2">外送</button>
        </div>
      </template>
      <template #value>
        <div class="shlfone">
          <p> <i>i慢必赔</i>立即配送</p>
          <span>约</span>
          <van-count-down millisecond :time="time" format="mm:ss" />
          <span>送达</span>
        </div>
      </template>
    </van-cell>


    <!-- 配送信息模块 -->
    <van-cell-group class="Delivery">

      <van-cell center title="配送信息" class="Deliveryone" @click="$router.push('/providehome')">
        <!-- <template #value>
            <van-icon name="arrow" />
          </template> -->
        <template #label>
          <!-- 父元素渲染 -->
          <div class="Deliveryone_left">
            <van-icon name="location-o" />{{ addessstore.addressinfo.address }} <van-tag plain
              type="primary">{{ addessstore.addressinfo.Labelress }}</van-tag>
            <br>
            <van-icon name="phone-o" />{{ addessstore.addressinfo.addressDetail }}

          </div>
        </template>
      </van-cell>

      <!-- 订单信息 -->
      <div class="Deliveryordertwo">
        <h2>订单信息</h2>
        <div class="Deliveryorder" v-for="item in stores.orderData">
          <span> {{ item.goods_name }}<i>大/单粉糖/单粉奶/热</i></span>
          <b>x{{ item.goods_num }}</b>
          <span>￥{{ item.goods_price * item.goods_num }}</span>
        </div>


        <div class="Deliveryname">
          <p>配送费 <i>面价满55元免配送 </i> </p>
          <span>￥{{ delPrice }}</span>

        </div>
      </div>

      <van-cell value="内容" class="total">
        <template #value>
          <div>
            合计 <span>￥{{ total + delPrice }}</span>
          </div>
        </template>

      </van-cell>
    </van-cell-group>

    <!-- 使用优惠 -->
    <van-cell-group class="pay">
      <van-cell title="使用优惠">
        <van-switch v-model="checked" active-color="#88afd5" inactive-color="#dcdee0" @change="Discount" />
      </van-cell>

      <van-cell v-show="show">
        <template #title>
          <p>使用咖啡钱包</p>
          <b>充值优惠</b>
        </template>

        <template #value>

          <span>1个可用</span>
          <van-icon name="arrow" />
        </template>

      </van-cell>
      <van-cell v-show="show">
        <template #title>
          <p>使用优惠券</p>
        </template>
        <span>6个可用</span>
        <van-icon name="arrow" />
      </van-cell>
      <van-cell title="支付方式">

        支付宝支付
        <van-icon name="arrow" />

      </van-cell>
      <van-cell title="备注特殊要求" class="paybei">
        <template #value>

          <van-icon name="arrow" />
        </template>
      </van-cell>
    </van-cell-group>


    <!-- 协议模块 -->
    <div class="agree">
      <input type="checkbox" checked>
      <span>我已阅读并同意</span> <a href="#">《支付协议》</a>
      <p>温馨提示:仅支持开具电子发票，订单完成后可前往发票管理中开具</p>
    </div>


    <!-- 支付模块 -->
    <div class="nodepay">

      <p>还需支付<span> ￥{{ total + delPrice }}</span></p>
      <button @click="gobuy">去支付</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router/index'
import { useConfirm } from '@/hooks/useconfirm'
import { useAddressStore } from '@/store/index'
import { usePayStore } from '@/store/goPay'
import { useBuyNumber } from '@/store/discountCoupon'
const BuyNumber = useBuyNumber()

const addessstore = useAddressStore()
const stores = usePayStore()


//总价计算
const total = stores.orderData.reduce((prev, item) => {
  return prev + item.goods_price * item.goods_num
}, 0)

const delPrice = ref()
if (total >= 55) {
  delPrice.value = 0
}else {
  delPrice.value = 6
}
console.log(total)
BuyNumber.money = total + delPrice.value


//判断自提或者外送进行跳转高亮
const flag = ref(2);
const flag1 = () => {
  flag.value = 1
  router.push('/shop')
}
const flag2 = () => {
  flag.value = 2

}
//hooks公用组件
const { time, checked, show, Discount, gobuy } = useConfirm()
</script>

<style lang="scss" scoped>
//头部
.van-nav-bar {
  position: sticky;
  top: 0;
}

//自提和外送
.myshlf {
  height: 80px;
  margin-bottom: 5px;

  .shlf {
    border: 1px solid #88afd5;
    width: 90px;
    height: 36px;
    border-radius: 18px;
    text-align: center;
    margin-top: 20px;

    button {
      display: inline-block;
      font-size: 12px;
      margin-top: 3px;
      width: 44px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: none;
      background-color: #fff;

    }

    .active {
      background-color: #88afd5;
      color: #fff;
    }


  }

  .shlfone {
    margin-top: 15px;
    height: 45px;

    p {
      height: 19px;
      font-size: 13px;
      color: #000;
      font-weight: 900;

      i {
        border: 1px solid #88afd5;
        width: 55px;
        height: 16px;
        font-size: 10px;
        font-weight: none;
        margin-right: 5px;
      }
    }

    span {
      display: inline-block;
    }

    .van-count-down {
      display: inline-block;
      font-size: 20px;
      color: #88afd5;
      font-weight: 900;
    }
  }
}


//配送信息
.Delivery {

  margin-bottom: 5px;

  .Deliveryordertwo {
    h2 {
      font-size: 14px;
      margin-left: 15px;
      line-height: 30px;
    }

    .Deliveryorder {
      display: flex;
      justify-content: space-between;
      margin: 5px 18px;

      span {
        font-size: 15px;
        font-weight: 900;
        color: #000;

        i {
          display: block;
          font-size: 10px;
          color: #ccc;

        }
      }

      b {
        font-size: 13px;
        line-height: 30px;
      }
    }

    .Deliveryname {
      margin: 0 18px;
      display: flex;
      justify-content: space-between;

      p {
        font-size: 15px;
        color: #000;

        i {
          display: block;
          font-size: 10px;
          color: #ff8102;

        }
      }

      span {
        display: block;
        font-size: 10px;

      }

    }

  }

  //合计内容
  .total {
    span {
      font-weight: 900;
      font-size: 16px;
      color: #000;
    }
  }
}


//优惠
.pay {
  background-color: rgb(237, 237, 237);

  .van-cell {
    height: 50px;
    font-size: 14px;
    line-height: 30px;

    p {
      color: #88afd5;
      display: inline-block;
    }

    b {

      width: 40px;
      height: 16px;
      border-radius: 2px;
      background-color: #ff8102;
      color: #fff;
      font-size: 8px;
      margin-left: 5px;
    }

    span {
      color: #ff8102;
    }
  }

  .paybei {
    margin-top: 5px;
  }
}

//支付
.nodepay {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  font-weight: 900;

  p {
    margin-left: 15px;
    font-size: 14px;
    line-height: 60px;

    span {
      font-size: 24px;
    }

  }

  button {
    width: 120px;
    height: 60px;
    border: none;
    background-color: #88afd5;
    color: #fff;

  }

}

//协议
.agree {
  height: 40px;
  margin-bottom: 60px;
  font-size: 8px;

  p {
    margin-left: 2px;
  }
}
</style>